
<template>
  <div>
    <div class="followup_wrapper">
      <div class="tabs_table_panel">
        <div class="patient-info-table">
          <div class="tabs_panel">
            <div class="tabs_items active_current">随访信息</div>
            <div>
              <el-button
                style="margin-right: 20px"
                type="primary"
                v-show="add_button_status"
                @click="addFollowUp"
                >新增</el-button
              >
              <el-radio-group v-model="fill_status" @change="changeStatus">
                <el-radio :label="true">已填</el-radio>
                <el-radio :label="false">未填</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="tabel_wrapper">
            <el-card
              class="box-card"
              v-for="item in tableData"
              :key="item.planPatFormId"
            >
              <div class="text item">
                <div class="formName" @click="details(item.planPatFormId)">
                  <div
                    style="
                      overflow: hidden;
                      width: 200px;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    :title="item.formName"
                  >
                    {{ item.formName }}
                  </div>
                  <div style="margin-left: 20px" v-if="item.isFill">
                    ({{ initTime(item.planPatFormFillTime) }})
                  </div>
                </div>
                <div>
                  <span class="remark">{{ initTime(item.createTime) }}</span>
                  <span class="remark">{{ item.name }}</span>
                  <span class="remark">{{ item.departmentName }}</span>
                  <span class="remark">{{ item.userName }}</span>
                </div>
                <div
                  style="
                    min-width: 300px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div style="font-size: 14px">
                    <span>
                      {{ item.isFill ? "已填" : "未填" }}
                    </span>
                  </div>
                  <div style="display: flex">
                    <el-button
                      type="text"
                      style="margin-right: 20px"
                      v-show="
                        item.isFlag != '0' && contrastTime(item.createTime)
                      "
                      @click="editorFollowUp(item.planPatFormId)"
                      >修改</el-button
                    >
                    <el-popconfirm
                      @onConfirm="delFollowUp(item.planPatFormId)"
                      title="提示：删除后无法恢复，请确定是否删除？"
                    >
                      <el-button
                        slot="reference"
                        v-show="
                          item.isFlag != '0' && contrastTime(item.createTime)
                        "
                        type="text"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div class="paging">
            <el-pagination
              background
              :current-page.sync="pageNum"
              :page-sizes="pageSizes"
              layout="total,prev, pager, next,sizes"
              :total="total"
              @size-change="changeSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisibleTable_dialog_plan"
      id="dialog_table_plan"
      title="随访计划及随访问卷"
      @closed="follow_up_plan_close"
    >
      <div>
        <el-table :data="tableData_dialogData_plan" max-height="400">
          <el-table-column width="55">
            <template scope="scope">
              <el-radio
                :label="scope.row.planId"
                v-model="templateRadio_dialog"
                @change.native="getTemplateRow_dialog(scope.row)"
                >{{ "" }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="formName"
            label="随访计划名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="planName"
            label="表单计划名称"
            align="center"
          ></el-table-column>
        </el-table>
      </div>

      <div class="paging">
        <el-pagination
          background
          :current-page.sync="pageNum_dialog_plan"
          :page-sizes="pageSizes_dialog_plan"
          layout="total,prev, pager, next,sizes"
          :total="total_dialog_plan"
          :page-size="pageSize_dialog_plan"
          @size-change="changeSize_dialog_plan"
          @current-change="changePage_dialog_plan"
        ></el-pagination>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {
  listFollowYzyPlanForm,
  getFollowYzyPlanFormByPat,
  deleteFolPatForm,
} from "@/api/follow-up/follow-up-information";
import { string } from "jszip/lib/support";

export default {
  name: "follow_up_information",
  // props: {
  //   patId: { type: String },
  //   planId: { type: Number },
  //   add_button_status: { type: Boolean },
  //   memPatTypeCodes: { type: String },
  // },
  props:['patId','planId','add_button_status','memPatTypeCodes'],  data() {
    return {
      // 总数据
      tableData: [],
      total: 0,
      // 默认显示第几页
      pageNum: 1,
      pageSize: 10,
      /*    id: "", //接收父组件的planPatId */
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      // 个数选择器（可修改）
      pageSizes: [10, 20, 50],
      fill_status: "",
      isFlag: "", //1是新增0是自动发送并且时间在一天内，可以进行删除，修改
      plan_list: [],
      templateRadio_dialog: "",
      /* ========================= */
      dialogVisibleTable_dialog_plan: false,
      tableData_dialogData_plan: [],
      pageNum_dialog_plan: 1,
      pageSizes_dialog_plan: [10, 20, 50],
      total_dialog_plan: 0,
      pageSize_dialog_plan: 10,
      button_status: "",
    };
  },

  created() {
  this.add_button_status=  sessionStorage.getItem("add_button_status")
    console.log(this.add_button_status,"this.add_button_status")
  },
  mounted() {
    this.initData();
  },
  methods: {
    calStar(curr) {
      let pageNum = (curr - 1) * this.pageSize;
      return pageNum;
    },
    calStar_dialog(curr) {
      let pageNum = (curr - 1) * this.pageSize_dialog_plan;
      return pageNum;
    },
    changeSize(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initData();
    },
    changePage(page) {
      this.pageNum = page;
      this.initData();
    },
    changeSize_dialog_plan(size) {
      this.pageSize_dialog_plan = size;
      this.pageNum_dialog_plan = 1;
      this.initDataPlanFormByPat();
    },
    changePage_dialog_plan(page) {
      this.pageNum_dialog_plan = page;
      this.initDataPlanFormByPat();
    },
    initTime(time) {
      let str = `${time[0]}-${time[1]
        .toString()
        .padStart(2, "0")}-${time[2]
        .toString()
        .padStart(2, "0")} ${time[3]
        .toString()
        .padStart(2, "0")}:${time[4]
        .toString()
        .padStart(2, "0")}:${time[5].toString().padStart(2, "0")}`;
      return str;
    },
    contrastTime(time1) {
      let time2 = `${time1[0]}${time1[1]
        .toString()
        .padStart(2, "0")}${time1[2].toString().padStart(2, "0")}`;
      let time = new Date();
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let time3 = `${y}${m.toString().padStart(2, "0")}${d
        .toString()
        .padStart(2, "0")}`;
      if (time2 == time3) {
        return true;
      } else {
        return false;
      }
    },
    changeStatus(status) {
      this.fill_status = status;
      this.initData();
    },
    details(id) {
      this.$router.push({
        path: "follow-up-information-details",
        query: {
          planPatFormId: id,
          patId: this.patId,
          planId: this.planId,
          memPatTypeCodes: this.memPatTypeCodes,
        },
      });
    },
    next() {
      if (this.plan_list.length == 0) {
        this.$message({
          message: "请选择一条随访计划",
          type: "warning",
        });
      } else {
        this.$router.push({
          path: "follow-up-information-details_blank",
          query: {
            followYzyPlan: encodeURIComponent(
              JSON.stringify(this.plan_list[0])
            ),
            questionnaireId: this.plan_list[0].formId,
            patId: this.patId,
            planId: this.planId,
            memPatTypeCodes: this.memPatTypeCodes,
          },
        });
      }
    },
    //关闭弹窗需要将计划字段清空，防止没勾选时进入弹出页
    follow_up_plan_close() {
      this.plan_list = [];
      this.templateRadio_dialog = "";
    },
    getTemplateRow_dialog(row) {
      this.plan_list = [row];
    },
    addFollowUp() {
      this.dialogVisibleTable_dialog_plan = true;
      this.initDataPlanFormByPat();
    },
    editorFollowUp(planPatFormId) {
      this.$router.push({
        path: "follow-up-information-editor",
        query: {
          planPatFormId: planPatFormId,
          patId: this.patId,
          planId: this.planId,
          memPatTypeCodes: this.memPatTypeCodes,
        },
      });
    },
    delFollowUp(planPatFormId) {
      let params = {
        planPatFormId: planPatFormId,
      };
      deleteFolPatForm(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    initData() {
      let params = {
        length: this.pageSize,
        start: this.calStar(this.pageNum),
        patId: this.patId,
        isFill: this.fill_status,
      };
      listFollowYzyPlanForm(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.count;
        } else {
          this.$message({
            message: "数据查询失败",
            type: "error",
          });
        }
      });
    },
    initDataPlanFormByPat() {
      let params = {
        length: this.pageSize_dialog_plan,
        start: this.calStar_dialog(this.pageNum_dialog_plan),
        patId: this.patId,
      };
      getFollowYzyPlanFormByPat(params).then((res) => {
        if (res.code == 200) {
          this.tableData_dialogData_plan = res.data.list;
          this.total_dialog_plan = res.data.count;
        } else {
          this.$message({
            message: "数据查询失败",
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.tabs_panel {
  display: flex;
  justify-content: space-between;
  .tabs_items {
    font-size: 16px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #32353b;
      span {
        color: #05afc8;
      }
    }
  }
}
.box-card {
  margin-bottom: 20px;
  .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .formName {
      width: 450px;
      display: flex;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }
    .formName:hover {
      color: #1890ff;
    }
    .remark {
      font-size: 14px;
      margin-right: 20px;
    }
    .remark:last-child {
      margin-right: 0px;
    }
  }
}
.box-card:last-child {
  margin-bottom: 0px;
}
.followup_wrapper {
  background: rgb(245, 246, 250);
  display: flex;
  display: -webkit-box;
  justify-content: space-between;
}
.tabs_table_panel {
  flex: 1;
  background: #fff;
}

.patient-info-table {
  background: #fff;
  border-radius: 4px;
}

.tabel_wrapper {
  margin-top: 15px;
}
</style>
<style lang="scss">
.el-pager li {
  background: #ffffff;
  border: 1px solid #e4e7ed;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #05afc8;
}
.el-input__inner {
  color: #000;
}
#dialog_table_plan > .el-dialog {
  width: 90vw;
  margin-top: 8vh !important;
}
</style>

